<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="../plugin/ztree/css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" type="text/css" href="../plugin/json/css/jquery.json-viewer.css"/>
    <link rel="stylesheet" type="text/css" href="../plugin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="../style/style.css"/>
    <link rel="stylesheet" type="text/css" href="../style/data-cluster.css"/>
</head>
<body>
<div class="root">
    <div class="topbar">
        <div class="topbar-menu">
            <a href="javascript:toPage(0,1)" class="topbar-menu-item">
                <img src="../image/menu01.png"/><span>连接</span>
            </a>
            <a href="javascript:toPage(1,2)" class="topbar-menu-item curr">
                <img src="../image/menu02.png"/><span>数据</span>
            </a>
            <a href="javascript:toPage(1,3)" class="topbar-menu-item">
                <img src="../image/menu03.png"/><span>信息</span>
            </a>
            <a href="javascript:toPage(1,4)" class="topbar-menu-item">
                <img src="../image/menu04.png"/><span>配置</span>
            </a>
            <a href="javascript:toPage(1,5)" class="topbar-menu-item">
                <img src="../image/menu05.png"/><span>监控</span>
            </a>
        </div>
        <div class="topbar-logo"><img src="../image/app01.png"/></div>
    </div>
    <div class="handle">
        <div class="handle-left">
            <div class="handle-left-main">
                <div class="key-like">
                    <input id="key-like-input" class="query-like-input" onkeypress="keydownLoadTree()"
                           type="text" placeholder="请输要检索的key表达式">
                    <button class="layui-btn layui-btn-sm query-like-button set-color" onclick="loadLikeTree()">
                        <i class="layui-icon">&#xe615;</i>搜索
                    </button>
                </div>
            </div>
            <div class="handle-left-full">
                <div id="db-tree"></div>
            </div>
        </div>
        <div class="handle-right">
            <div class="handle-right-main">
                <div class="key-deal">
                    <button class="layui-btn layui-btn-primary layui-btn-sm set-color" onclick="renameKey()">
                        <i class="layui-icon">&#xe642;</i>重命名
                    </button>
                    <button class="layui-btn layui-btn-primary layui-btn-sm set-color" onclick="deleteKey()">
                        <i class="layui-icon">&#xe640;</i>删除
                    </button>
                    <button class="layui-btn layui-btn-primary layui-btn-sm set-color" onclick="retimeKey()">
                        <i class="layui-icon">&#xe60e;</i>TTL
                    </button>
                    <button class="layui-btn layui-btn-primary layui-btn-sm set-color" onclick="reloadKey()">
                        <i class="layui-icon">&#xe666;</i>刷新
                    </button>
                    <button class="layui-btn layui-btn-primary layui-btn-sm set-color" onclick="insertKey()">
                        <i class="layui-icon">&#xe61f;</i>新增
                    </button>
                </div>
                <div class="key-info">
                    <table class="layui-table">
                        <colgroup>
                            <col width="25%">
                            <col width="25%">
                            <col width="25%">
                            <col width="25%">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>KEY</th>
                            <th>类型</th>
                            <th>大小</th>
                            <th>TTL</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr style="height: 41px">
                            <td><input id="keys" class="copy-input-box" title="" readonly=""/></td>
                            <td><input id="type" class="copy-input-box" title="" readonly=""/></td>
                            <td><input id="size" class="copy-input-box" title="" readonly=""/></td>
                            <td><input id="ttls" class="copy-input-box" title="" readonly=""/></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="key-view">
                    <div class="key-tool-view">
                        <div class="layui-row">
                            <div class="layui-col-sm3">
                                <button id="btn1" class="layui-btn layui-btn-fluid key-tool-abtn"
                                        onclick="changeDataView(1)">TEXT
                                </button>
                            </div>
                            <div class="layui-col-sm3">
                                <button id="btn2" class="layui-btn layui-btn-fluid key-tool-dbtn"
                                        onclick="changeDataView(2)">JSON
                                </button>
                            </div>
                            <div class="layui-col-sm3">
                                <button id="btn3" class="layui-btn layui-btn-fluid key-tool-dbtn"
                                        onclick="changeDataView(3)">RAWS
                                </button>
                            </div>
                            <div class="layui-col-sm3">
                                <button id="btn4" class="layui-btn layui-btn-fluid key-tool-dbtn"
                                        onclick="changeDataView(4)">EDIT
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="handle-right-full">
                <div class="key-vals-view">
                    <textarea id="vals1" class="vals key-vals-show" title="" readonly=""></textarea>
                    <div id="vals2" class="vals key-vals-hide"></div>
                    <textarea id="vals3" class="vals key-vals-hide" title="" readonly=""></textarea>
                    <div id="vals4" class="vals key-vals-hide"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="ztree-menu">
    <ul>
        <li onclick="removeData()"><cite>清空数据</cite></li>
        <li onclick="backupData()"><cite>备份数据</cite></li>
        <li onclick="recoveData()"><cite>还原数据</cite></li>
    </ul>
</div>

<script type="text/javascript" src="../plugin/json/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../plugin/json/js/jquery.json-viewer.js"></script>
<script type="text/javascript" src="../plugin/layui/layui.js"></script>
<script type="text/javascript" src="../plugin/ztree/zTree.js"></script>
<script type="text/javascript" src="../script/nocopy.js"></script>
<script type="text/javascript" src="../script/script.js"></script>
<script type="text/javascript" src="../script/data-cluster.js"></script>
</body>
</html>